import Taro, { Component } from '@tarojs/taro'
import { AtForm, AtButton } from 'taro-ui'
import { View, Image, Text } from '@tarojs/components'
import { DNavBar, DLookImages } from '@/components'
import './checkimg.scss'
import http from '@/api'

const map = require('../assets/positioning.png')
const itembg = require('../assets/pic@2x.png')
export default class checkimg extends Component {

  constructor(props) {
    super(props)
    this.state = {
      active: 0,
      detail: '',
      outPic: [],
      inPic: [],
      carInfo: [],
      otherImg: [],
      status: '',
      otfRemark: '',
      companycar: {
        itemStatus: false,
        itemUrl: ''
      }
    }
  }
  componentWillMount() {
    // this.getDeatil()
    this.setState({
      status: this.$router.params.status
    })
    this.getImgs()
  }


  handleClick(value) {
    this.setState({
      active: value
    })
  }

  getImgs() {
    const { outPic, inPic, carInfo, otherImg } = this.state
    let _obj = {
      id: this.$router.params.id
      // id: '2a39b3a141234c0faaa0343369050e7a'
    }
    http.checkCarPhotos(_obj).then(res => {
      if (!res) {
        return;
      }
      let _list = res.files

      // console.log(res)
      _list.forEach((item, index) => {
        let obj = {}
        obj['otfName'] = item.otfName
        obj['otfUrl'] = item.otfUrl
        if (item.otfType === '1') {
          outPic.push(obj)
        } else if (item.otfType.split('')[0] === '2') {
          if (item.otfType.split('')[1] === '1') {
            inPic.unshift(obj)
          } else {
            inPic.push(obj)
          }
        } else if (item.otfType.split('')[0] === '3') {
          if (item.otfType.split('')[1] === '1') {
            carInfo.unshift(obj)
          } else {
            carInfo.push(obj)
          }
        } else if (item.otfType === '4') {
          otherImg.push(obj)
        }
      })
      this.setState({
        outPic,
        inPic,
        carInfo,
        otherImg,
        otfRemark: res.otfRemark
      })
      // console.log(111, _list)
    })
  }
  onSubmit() {
    let _obj = {
      id: this.$router.params.id
    }
    http.buyersConfirmCarPhotos(_obj).then(res => {
      if (!res) {
        // console.log(111)
        return;
      }
      // console.log(666, res.info)
      Taro.showToast({
        title: '提交成功',
        duration: 800,
        mask: true
      }).then(() => {
        setTimeout(()=>{
          Taro.redirectTo({
            // url: `/pages/itemdetail/itemdetail?id=${this.$router.params.id}&status=41`
            url: `/pages/consignment/consignment?active=3`
          })
        },1000)
      })
    })
  }

  onLookHandle(url, i, arr = []) {
    if (window.bridge && arr.length > 0) {
      let _images = []
      arr.map(item => {
        _images.push(item.otfUrl)
      })
      window.bridge.callHandler('previewPhoto', { "index": i, "images": _images }, function responseCallback() { })
    } else {
      this.setState({
        companycar: {
          ...this.state.companycar,
          itemStatus: true,
          itemUrl: url
        }
      })
    }
  }

  onLookItem() {
    this.setState({
      companycar: {
        ...this.state.companycar,
        itemStatus: false,
        itemUrl: ''
      }
    })
  }
  render() {
    const {
      active,
      list,
      detail,
      outPic,
      inPic,
      carInfo,
      otherImg,
      status,
      otfRemark,
      companycar
    } = this.state
    return (
      <View className='b_checkimg'>
        <DNavBar title={'验车照片'} className='b_checkimg_nav'></DNavBar>
        <View className='b_checkimg__box'>
          <View className='b_checkimg__images'>
            <Text className='b_checkimg__images_title'>验车照片</Text>
            <View className="b_checkimg__images_enterpris">
              <View className='b_checkimg__images_enterpris_item'>
                <Text className='item_title'>车辆外观</Text>
                {outPic &&
                  outPic.map((item, i) => {
                    return <View className='picBox'>
                      <Image src={item.otfUrl} className='item_image' onClick={this.onLookHandle.bind(this, item.otfUrl, i, outPic)}></Image>
                      {/* <Text className='picText'>{item.otfName}</Text> */}
                    </View>
                  })
                }

              </View>
              <View className="b_checkimg__images_enterpris_item">
                <Text className="item_title">车内照片</Text>
                {inPic &&
                  inPic.map((item, i) => {
                    return <View className='picBox'>
                      <Image src={item.otfUrl} className='item_image' onClick={this.onLookHandle.bind(this, item.otfUrl, i, inPic)}></Image>
                      <Text className='picText'>{item.otfName}</Text>
                    </View>
                  })
                }
              </View>
              <View className="b_checkimg__images_enterpris_item">
                <Text className="item_title">车辆信息</Text>
                {carInfo &&
                  carInfo.map((item, i) => {
                    return <View className='picBox'>
                      <Image src={item.otfUrl} className='item_image' onClick={this.onLookHandle.bind(this, item.otfUrl, i, carInfo)}></Image>
                      <Text className='picText'>{item.otfName}</Text>
                    </View>
                  })
                }
              </View>
              {otherImg.length > 0 &&
                <View className="b_checkimg__images_enterpris_item">
                  <Text className="item_title">异常照片</Text>
                  {
                    otherImg.map((item, i) => {
                      return <View className='picBox'>
                        <Image src={item.otfUrl} className='item_image' onClick={this.onLookHandle.bind(this, item.otfUrl, i, otherImg)}></Image>
                        <Text className='picText'>{item.otfName}</Text>
                      </View>
                    })
                  }
                </View>
              }
            </View>

          </View>
          <View className="b_checkimg__remark">
            <View className="b_checkimg__remark_title">
              备注
              </View>
            <View>
              {otfRemark || '(空)'}
            </View>
          </View>
          {status == 1 && <View className='b_checkimg__footer'>
            <AtButton className='item_btn' onClick={this.onSubmit.bind(this)}>完成验车</AtButton>
          </View>}
        </View>
        <DLookImages status={companycar.itemStatus} url={companycar.itemUrl} onLookHandle={this.onLookItem.bind(this)}></DLookImages>
      </View>

    )
  }

}